<ul class="nav nav-tabs mb-2" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="formData-tab" data-toggle="tab" href="#formData" role="tab" aria-controls="home" aria-selected="true">Form</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="variables-tab" data-toggle="tab" href="#variables" role="tab" aria-controls="profile" aria-selected="false">Variables</a>
  </li>
</ul>

<div class="tab-content border-bottom mb-2" id="myTabContent">
  <div class="tab-pane fade show active" id="formData" role="tabpanel" aria-labelledby="formData-tab">
  	<form>
			{{#formFields}}
				 <div class="form-group">
			    <label>{{label}}</label>
			    <input type="{{type}}" id="form_{{key}}" class="form-control task-form">
			  </div>
			{{/formFields}}
			
			{{^formFields}}
				<p>No form fields defined.</p>				
			{{/formFields}}
		</form>
  </div>
  
  <div class="tab-pane fade" id="variables" role="tabpanel" aria-labelledby="variables-tab">
  	<form>
			{{#variables}}
				 <div class="form-group">
			    <label>{{key}}</label>
			    <input type="text" class="form-control" value="{{value}}" readonly>
			  </div>
			{{/variables}}
			
			{{^variables}}
				<p>No variables available.</p>
			{{/variables}}
		</form>
  </div>
  
</div>

<button type="button" class="btn btn-primary" onclick="complete()">
  Complete
</button>

<script>
	function complete() {
		var data = [];
		
		{{#formFields}}
			var formInput = document.getElementById("form_{{key}}");
			var value = formInput.value;
			
			if (formInput.type == "number") {
				value = Number(value)
			} else if (formInput.type == "checkbox") {
				value = Boolean(formInput.checked)
			}
			
			data.push({ key: "{{key}}", value: value });
		{{/formFields}}
	
		completeTask(data);
	}	
</script>